<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
	content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.3.0.min.css" />

<link rel="stylesheet" type="text/css" href="maps.css" />

<script type="text/javascript" src="../cordova-2.5.0.js"></script>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>

<title>Wine Town</title>
</head>
<body>

	<div data-role="page" data-page="googlemaps">
		<script type="text/javascript"
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwdz_dqR7mqEEs0Utj1FngaWjDPQzebGA&sensor=true">
			
		</script>

		<script type="text/javascript" src="maps.js"></script>

		<div data-role="header" data-position="fixed">
			<h1>Wine Town</h1>
		</div>

		<div id="googlemaps" data-role="content" style="display: none;">
			<div id="map-canvas"></div>
		</div>


		<script type="text/javascript">
			function initializeMaps() {
				var mapOptions = {
					center : new google.maps.LatLng(43.768035, 11.253169),
					zoom : 18,
					mapTypeId : google.maps.MapTypeId.ROADMAP
				};

				return new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
			}

			$('[data-page="googlemaps"]').on('pageinit', function(event) {
				var map = initializeMaps();
				var mapController = new TestMapsController(map);
				mapController.showCurrentPosition();
				showContent();
			});
		</script>

	</div>


</body>
</html>
